<!-- 进度条 -->
<template>
	<view class="m-draggable" @touchmove="handleTouchMove">
		<view class="m-draggable-card">
			<view class="marker" :style="{ 'left': progress + '%' }"></view>
			<view class="m-draggable-bg flex-between">
				<view class="li" v-for="(item,idx) in 6" :key="item" @click.stop="handleTouchStart(idx)">
					<text></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "m-draggable",
		data() {
			return {
				progress: 0,
				barWidth: 0, //总长度
				markerWidth: 0, //块宽度
			};
		},
		props: {
			value: {
				type: [Number, String],
				default: 0,
			},
			num: {
				type: [Number, String],
				default: 0,
			},
		},
		mounted() {
			this.$nextTick(() => {
				const query = uni.createSelectorQuery().in(this);
				query.select('.m-draggable').boundingClientRect(rect => {
					this.barWidth = rect.width;
				}).exec();
			})
		},
		watch: {
			progress(val) {
				let a = val / 100 * this.num
				this.$emit('input', this.integer(a, 2, true))
			}
		},
		methods: {
			refresh() {
				let a = this.progress / 100 * this.num
				this.$emit('input', this.integer(a, 2, true))
			},
			handleTouchStart(num) {
				this.progress = 100 / 5 * num;
			},
			handleTouchMove(event) {
				const diffX = event.touches[0].clientX;
				if (diffX <= 0 || diffX > (this.barWidth - this.markerWidth)) {
					return
				}
				const progress = (diffX / this.barWidth) * 100;
				//向上取整
				this.progress = Math.ceil(progress);
			}
		}
	};
</script>

<style lang="scss">
	.m-draggable {
		width: 100%;
		height: 55rpx;
		padding-left: 37rpx;
		box-sizing: border-box;
		position: relative;
	}

	.m-draggable-card {
		width: 100%;
		height: 100%;
		position: relative;
		z-index: 10;

	}

	.marker {
		position: absolute;
		z-index: 9;
		left: 0;
		top: 50%;
		transform: translate(-37rpx, -50%);
		width: 37rpx;
		height: 55rpx;
		background: url('../../static/images/UI/m-draggable-marker.png') no-repeat;
		background-size: 100% 100%;
	}

	.m-draggable-bg {
		position: absolute;
		top: 50%;
		left: -37rpx;
		transform: translateY(-50%);
		z-index: 5;
		width: calc(100% + 37rpx);

		&::after {

			content: "";
			display: block;
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			z-index: 1;
			width: 100%;
			height: 2rpx;
			background: #E4E6EA;
		}

		.li {
			position: relative;
			z-index: 9;
			padding: 10rpx;
			background: #fff;

			text {
				display: inline-block;
				width: 16rpx;
				height: 23rpx;
				background: #E4E6EA;
				border-radius: 5rpx;
			}
		}
	}
</style>